<template>
  <div class="in-box">
    <van-form @submit="onSubmit">
    <van-icon name="arrow-left" class="left" @click="router.back()" />
      <h3>修改个人信息</h3>
      <van-cell-group inset>
        <van-field
          required
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          required
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          required
          v-model="password"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{ required: true, message: '请填写手机号' }]"
        />
        <div class="file">
          <span>上传头像</span>
          <van-uploader :after-read="afterRead" />
        </div>
        <van-radio-group v-model="checked" direction="horizontal">
          <span>性别</span>
          <van-radio name="1">男</van-radio>
          <van-radio name="2">女</van-radio>
        </van-radio-group>
        <van-field
          v-model="username"
          name="邮箱"
          label="邮箱"
          placeholder="用户名"
        />
        <van-field
          v-model="fieldValue"
          is-link
          readonly
          label="地区"
          placeholder="请选择所在地区"
          @click="show = true"
        />
        <van-popup v-model:show="show" round position="bottom">
          <van-cascader
            v-model="cascaderValue"
            title="请选择所在地区"
            :options="options"
            @close="show = false"
            @finish="onFinish"
          />
        </van-popup>
         <van-field
    v-model="message"
    rows="2"
    autosize
    label="留言"
    type="textarea"
    maxlength="50"
    placeholder="请输入留言"
    show-word-limit
  />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit" class="t">
          修改
        </van-button>
        <van-button
          round
          block
          type="primary"
          native-type="submit"
          @click="router.back()"
          class="b"
        >
          取消
        </van-button>
      </div>
      
    </van-form>
    
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import router from "../../router/index";
const checked = ref("1");
/** 地区 */
const show = ref(false);
const fieldValue = ref("");
const cascaderValue = ref("");
// 选项列表，children 代表子选项，支持多级嵌套
const options = [
  {
    text: "浙江省",
    value: "330000",
    children: [{ text: "杭州市", value: "330100" }],
  },
  {
    text: "江苏省",
    value: "320000",
    children: [{ text: "南京市", value: "320100" }],
  },
];
// 全部选项选择完毕后，会触发 finish 事件
const onFinish = ({ selectedOptions }) => {
  show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join("/");
};
</script>

<style lang="less" scoped>
@import "../../style/common.less";
.in-box {
  .rel();
  background-color: #f0eff4;
  .van-form {
    text-align: center;
    h3 {
      line-height: 100px;
    }
    .van-radio-group {
      height: 44px;
      width: 358px;
      font-size: 12px;
      padding: 10px 16px;
      span {
        margin-right: 72px;
      }
    }
    .file {
      height: 100px;
      width: 358px;
      font-size: 12px;
      padding: 10px 16px;
      text-align: left;
      span {
        font-size: 12px;
        margin-right: 50px;
      }
    }
  }
  .van-button{
    width: 100%;
  }
  .t{
        margin-top: 140px;
    }
    .b{
        background-color: @c3;
        border: #EBEBEB;
        margin-top: 30px;
    }
    .left{
        position: fixed;
        left: 20px;
        top: 20px;
    }
}
</style>
